<template>
  <CommonNavbar :title="title" />
  <div class="detail-container">
    <van-swipe class="detail-banner" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in pics" :key="banner.id">
        <img :src="banner.pic" alt="" />
      </van-swipe-item>
    </van-swipe>
    <h3>{{ basicInfo.name }}</h3>

    <div class="content" v-html="content"></div>
  </div>
  <!-- 商品规格弹窗 -->
  <!-- 底部弹出 -->
  <van-popup
    v-model:show="popStatus"
    position="bottom"
    round
    closeable
    :style="{ height: '30%' }"
  >
    <div class="sku-container">
      <van-card
        :num="sku.number"
        :price="sku.minPrice"
        :title="sku.name"
        :thumb="sku.pic"
      >
        <template #footer>
          <van-stepper v-model="sku.number" />
          <van-button block size="small" type="danger" @click="confirmAction" round
            >确定</van-button
          >
        </template>
      </van-card>
    </div>
  </van-popup>
  <!-- /商品规格弹窗 -->
  <!-- 商品行动栏 -->
  <van-action-bar>
    <van-action-bar-icon icon="wap-home-o" text="首页" />
    <van-action-bar-icon icon="cart-o" :badge="cartStore.number" text="购物车" />
    <van-action-bar-button
      color="#E94971"
      type="warning"
      @click="showPop(0)"
      text="加入购物车"
    />
    <van-action-bar-button
      color="#FF623A"
      type="danger"
      @click="showPop(1)"
      text="立即购买"
    />
  </van-action-bar>
  <!-- /商品行动栏 -->
</template>

<script setup lang="ts" name="ItemDetail">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getItemDetail } from "@/api/detail";
import CommonNavbar from "@/components/CommonNavbar.vue";
import type { Item } from "@/types/homeType";
import useCartStore from "@s/cart";
const cartStore = useCartStore();
const route = useRoute();
const title = ref("详情页");
// 基础信息
const basicInfo = ref<any>({});
// 商品详情富文本
const content = ref("");
// 图片列表
const pics = ref<Array<{ id: number; pic: string }>>([]);
// 商品规格
const sku = ref<any>({});
const fetchDetail = () => {
  getItemDetail(route.query.id as string).then((res) => {
    if (res.data.code === 0) {
      basicInfo.value = res.data.data.basicInfo;
      content.value = res.data.data.content.replace(
        /<img/gi,
        '<img style="display:block;width:100%"'
      );
      pics.value = res.data.data.pics;
      sku.value = {
        ...basicInfo.value,
        number: 1,
      };
      title.value = basicInfo.value.name;
    }
  });
};

// 商品规格弹窗状态
const popStatus = ref(false);
let actionStatus = 0; // 0  加入购物车 1购买
const showPop = (status: number) => {
  actionStatus = status;
  popStatus.value = true;
};
// 商品规格弹窗确定 点击
const confirmAction = () => {
  if (actionStatus === 0) {
    cartStore.addCart({
      goodsId: sku.value.id,
      number: sku.value.number,
    });
  } else {
    alert("去确认订单");
  }
  popStatus.value = false;
};
onMounted(() => {
  fetchDetail();
});
</script>

<style scoped lang="scss">
.detail-container {
  padding-top: 46px;
  padding-bottom: 50px;
  .detail-banner {
    width: 10rem;
    height: 5rem;
    img {
      width: 10rem;
      height: 5rem;
    }
  }
}
.sku-container {
  padding: 10px;
}
</style>
